<template>
  <div class="commentReply">
    <van-nav-bar :title="`${comment.replycount}条回复`">
      <van-icon slot="left" name="cross" @click="$emit('colose-reply')" />
    </van-nav-bar>
    <CommentItem :comment="comment" />

    <van-cell title="全部回复" />
    <CommentList :source="comment.id" type="c" :list="commentList" />

    <!-- 底部     -->
    <div class="bottom-container">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        icon="edit"
        @click="isCommentShow = true"
        >回 复 ta</van-button
      >
    </div>

    <van-popup v-model="isCommentShow" position="bottom">
      <PostComment
        :orId="comment.id"
        :articleId="articleId"
        @update-comments="updateComment"
      />
    </van-popup>
  </div>
</template>
<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import PostComment from './post-comment'
export default {
  name: 'CommentReply',
  data () {
    return {
      isCommentShow: false,
      commentList: []
    }
  },
  created () {},
  methods: {
    updateComment (comment) {
      // 发布成功得到数据
      this.commentList.unshift(comment)
      // 增加回复数量
      this.comment.replycount++
      // 关闭回复弹窗
      this.isCommentShow = false
    }
  },
  components: { CommentItem, CommentList, PostComment },
  props: {
    comment: {
      type: Object,
      required: true
    },
    articleId: {
      type: [Number, String],
      required: true
    }
  },
  watch: {},
  computed: {},
  mounted () {}
}
</script>

<style lang="less" scoped>
.commentReply {
  min-height: 270px;
  /deep/.van-nav-bar {
    background-color: white;
    .van-nav-bar__title {
      color: black;
    }
  }
  .bottom-container {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    min-width: 100%;
    padding: 5px 10px;
    text-align: center;
    .comment-btn {
      min-width: 80%;
      background: #fff;
      font-size: 14px;
      color: #8e8e8e;
    }
  }
}
</style>
